<template>
  <div>hello {{ name }}</div>
  <div>你喜欢 {{ years }} 年的 {{ likes }} 吗？</div>
  <div>info = {{info}}</div>
  <div>title = {{title}}</div>
</template>

<script lang="ts">
import { defineComponent, onMounted, toRefs } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  props: {
    title: String,
    likes: String,
    years: {
      type: [String, Number],
      required: true // 必填
    },
    info: {
      type: Object,
      default: () => ({ // 对象和数组类型的默认值只能用函数返回
        title: '这里是对象类型的 prop'
      })
    },
    type: {
      // 自定义校验函数： type的值只能是 'success', 'warning', 'danger'
      validator: (val: string) => (
        ['success', 'warning', 'danger'].indexOf(val) !== -1
      )
    }
  },
  setup (props, context) {
    // 使用 `toRefs` 创建对prop的 `title` property 的响应式引用
    const { title } = toRefs(props);

    // 组件 props
    console.log('props = ', props);
    const { attrs, slots, emit } = context;
    // Attribute (非响应式对象)
    console.log('attrs = ', attrs);
    // 组件插槽 (非响应式对象)
    console.log('slots = ', slots);
    // 触发事件 (方法)
    console.log('emit = ', emit);

    // 1. 定义需要的数据
    // 2. 定义需要的方法
    // 3. 页面挂载初始化
    // 注册生命周期钩子
    onMounted(() => {
      title.value = 'MyComponent change title';
      console.log('onMounted', title);
    });
    // 4. 返回需要暴露给页面使用的数据和方法
    return {
      name: 'Wise.Wrong'
    };
  }
});
</script>
